<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui</title>
    <link rel="stylesheet" href="/plugin/layui/css/layui.css">
</head>
<body>


<!--
    容器
        .layui-container  固定宽度(常用)
        .layui-fluid      完整宽度(没有留白)


    栅格
        列组合
            .layui-col-{md}{3}
                md  中号
                sm  小号
                xs  超小号
                lg  大号

        列兼容
            class="layui-col-lg3 layui-col-md6"  不同size兼容
        列边距
            layui-col-space{1}  间距
        列偏移
            layui-col-md-offset4  向右移动4个格子
        列嵌套
            可以无限嵌套
            注意: 一个大小为6的列 再被分为行时,默认又为12的大小了
        图标
            <i class="layui-icon layui-icon-water"></i>
-->
<h1>栅格</h1>
<div class="layui-container">
<!--定义行-->
    <div class="layui-row layui-col-space30">
<!--定义列-->
        <div class="layui-col-md3">
            <h1 style="background-color: #4A374A">3</h1>
        </div>
        <div class="layui-col-md3">
            <h1 style="background-color: #4A374A">3</h1>
        </div>
        <div class="layui-col-md3">
            <h1 style="background-color: #4A374A">3</h1>
        </div>
        <div class="layui-col-md3">
            <h1 style="background-color: #4A374A">3</h1>
        </div>
    </div>
</div>
<hr/>
<hr/>
<div class="layui-container">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md3">
            <h1 style="background-color: #e2ffbe">3</h1>
        </div>
        <div class="layui-col-md3 layui-col-md-offset6">
            <h1 style="background-color: #93D1FF">3</h1>
        </div>
    </div>
</div>
<hr/>
<hr/>
<div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md8" style="background-color: #FD482C">
                <div class="layui-row">
                    <div class="layui-col-md6" style="background-color: #93D1FF">
                        123
                    </div>
                    <div class="layui-col-md6"  style="background-color: #4476A7">
                        456
                    </div>
                </div>
            </div>

            <div class="layui-col-md4" style="background-color: #c9c9c9">
                <div class="layui-row">
                    <div class="layui-col-md6" style="background-color: #93D1FF">
                        123
                    </div>
                    <div class="layui-col-md6"  style="background-color: #FD482C">
                        123
                    </div>
                </div>
            </div>
        </div>
</div>




<h1>按钮</h1>

<a class="layui-btn layui-btn-normal layui-btn-radius" href="http://www.baidu.com">按钮</a>
<button type="button" class="layui-btn layui-btn-warm layui-btn-lg layui-btn-radius"> <!--样式-->
    <i class="layui-icon layui-icon-water"></i> <!--图标-->
    按钮
</button>



</body>
</html>


